<template>
  <div class="monitoring">
    <el-form ref="form" :model="form" label-width="40px">
      <el-form-item label="车牌号" style="width: 150px">
        <el-input v-model="form.name" placeholder="请输入车牌"></el-input>
      </el-form-item>
      <el-form-item label="来源类型" label-width="70px" style="width: 220px">
        <!-- <el-cascader v-model="form.groupingValue" :options="groupingList" style="line-height: 26px;"></el-cascader> -->
        <el-select v-model="form.pointTypeValue" placeholder="请选择来源类型">
          <el-option
            v-for="(item, index) in selectPointType"
            :value="item.label"
            :label="item.value"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分组" style="width: 220px">
        <!-- <el-cascader v-model="form.groupingValue" :options="groupingList" style="line-height: 26px;"></el-cascader> -->
        <el-select
          v-model="form.groupingValue"
          :options="groupingList"
          placeholder="请选择分组"
        >
          <el-option
            v-for="(item, index) in groupingList"
            :value="item.CLIENT_NO"
            :label="item.CLIENT_NAME"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="排序"> -->
      <el-radio-group
        v-model="radio"
        size="mini"
        fill="#007ACC"
        text-color="#fff"
        style="padding-left: 12px; padding-right: 8px"
        @change="getInfoList"
      >
        <el-radio-button label="定位时间"></el-radio-button>
        <el-radio-button label="称重时间"></el-radio-button>
      </el-radio-group>
      <!-- </el-form-item> -->
      <!-- <div class="people_number">
        在线:
        <span>{{statusNums.onlines}}</span>辆
      </div>-->
      <div class="people_number">
        全部:
        <span>{{ originalData.length }}</span
        >辆
      </div>
      <el-button size="mini" type="primary" @click="query">查 询</el-button>
      <!-- <el-form-item label="尾迹" style="width: 110px; margin-right: 10px">
        <el-select v-model="wakeValue" placeholder="尾迹">
          <el-option value="显示"></el-option>
          <el-option value="隐藏"></el-option>
        </el-select>
      </el-form-item>-->
      <!-- <div class="buttons"> -->
      <!-- <el-button
          class="iconfont icon-kaishi iconone"
          type="success"
          style="background-color:#347F10; color: #fff;"
          @click="startTracking"
          :disabled="disabled1"
        >开始跟踪</el-button>
        <el-button
          class="iconfont icon-tingzhi iconone"
          type="danger"
          style="background-color:#B36969; color: #fff; border: 0 none;"
          @click="cancelTracking"
          :disabled="disabled2"
      >取消跟踪</el-button>-->
      <!-- <el-button
        class="iconfont icon-tongji iconone"
        type="primary"
        size="mini"
        style="background:#468AD0"
        @click="onlineStatistics"
      >实时在线统计</el-button>-->
      <!-- <el-button
        class="iconfont icon-daochu iconone"
        size="mini"
        style="background-color: green; color: #fff; border: 0 none;"
        @click="exportExcel"
      >导出基础信息表</el-button>-->
      <el-button
        class="iconfont icon-daochu iconone"
        size="mini"
        style="background-color: green; color: #fff; border: 0 none"
        @click="exportExcel"
        >导出实时信息表</el-button
      >
      <!-- 自动刷新 -->
      <!-- <div class="switch iconone">
        <span>自动刷新</span>
        <el-switch
          v-model="switch_value"
          active-color="#13ce66"
          inactive-color="#ccc"
          @change="switchChange"
        ></el-switch>
      </div>-->
    </el-form>
    <!-- 人员信息列表 -->
    <div class="table_list">
      <el-table
        :data="screeningData"
        height="100%"
        style="width: 100%"
        size="mini"
        border
        fit
        highlight-current-row
        @row-contextmenu="rowHandle"
        @row-click="clickRow"
        @row-dblclick="dblClickRow"
        @cell-mouse-enter="cellMouseEnter"
      >
        <el-table-column prop="VID" label="编号" width="80"></el-table-column>
        <el-table-column
          prop="LICENSE_PLATE"
          label="车辆名称"
          width="110"
        ></el-table-column>
        <!-- <el-table-column prop="CAR_TYPE" label="车辆类型" width="100"></el-table-column> -->
        <el-table-column
          prop="CLIENT_NAME"
          label="分组"
          sortable
          width="100"
        ></el-table-column>
        <el-table-column
          prop="WEIGHING_TIME"
          label="称重时间"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          prop="TONNANG"
          label="称重数"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="RUBBISHTYPE"
          label="垃圾类型"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="POINTTYPE"
          label="来源类型"
          width="140"
        ></el-table-column>
        <el-table-column
          prop="WORKINGPOINT"
          label="工作点位"
          width="100"
        ></el-table-column>
        <!-- <el-table-column prop="RUBBISH_REGION" label="垃圾所属区" width="120"></el-table-column> -->
        <el-table-column
          prop="FACTORY"
          label="处理场名称"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="ORIENTATION_TIME"
          label="最终定位时间"
          sortable
          width="170"
        ></el-table-column>
        <el-table-column
          prop="withVideoAble"
          label="视频监控"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="POSITION"
          label="位置"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="Direction"
          label="航向"
          width="80"
        ></el-table-column>
        <el-table-column prop="SPEED" label="航速" width="80"></el-table-column>
        <el-table-column
          prop="LONGITUDE"
          label="经度"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="LATITUDE"
          label="纬度"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="车载称重类型"
          label="车载称重类型"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="车载称重时间"
          label="车载称重时间"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="车载称重点位名称"
          label="车载称重点位名称"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="车载称重重量"
          label="车载称重重量"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="车载称重桶数"
          label="车载称重桶数"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="整车重量"
          label="整车重量"
          width="90"
        ></el-table-column>
      </el-table>
    </div>
    <!-- 右键人员列表菜单 -->
    <div
      class="row_box"
      v-if="MouseEvent.isShow"
      :style="`left: ${MouseEvent.left}px; top: ${MouseEvent.top}px;`"
    >
      <span @click="exportRowExcel">导出Excel</span>
      <!-- <span @click="groupArea(teamNumber)">负责区域</span> -->
      <!-- <span @click="clearArea(teamNumber)">清扫队负责区域</span> -->
      <!-- <span>负责区域</span> -->
      <!-- <span @click="cleanArea">清除区域</span> -->
      <span @click="trajectory">轨迹回放</span>
      <span @click="showCCTV">视频监控</span>
      <span @click="showWeightLine">称重曲线</span>
    </div>
    <!-- 实时在线统计 -->
    <div class="statistical" v-if="Visible">
      <div class="title">
        <i class="iconfont icon-tongji1" />
        <h3>实时在线统计</h3>
        <span class="iconfont icon-guanbi close" @click="close" />
      </div>
      <div class="statistical_content">
        <el-table :data="statisticalData" style="width: 100%" stripe border>
          <!-- <el-table-column prop="名称" label="区域" align="center"></el-table-column> -->
          <el-table-column
            prop="AreaName"
            label="区域"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="OnlineVehicle"
            label="在线车辆(作业)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="AllVehicle"
            label="全部车辆"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
      <div class="statistical_time">
        统计时间：{{
          new Date().toLocaleDateString() +
          ' - ' +
          new Date().toTimeString().split(' ')[0]
        }}
      </div>
    </div>
    <el-dialog
      :title="dialogVisibleCCTVTitle"
      :visible.sync="dialogVisibleCCTV"
      width="700px"
      height="50%"
    >
      <iframe
        id="dialogVisibleCCTViframe"
        src=""
        frameborder="0"
        width="100%"
        height="500px"
      ></iframe>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleCCTV = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleCCTV = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 称重曲线图 -->
    <el-dialog
      :title="weightLinedialogTitle"
      :visible.sync="weightLinedialogVisible"
      width="80%"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form label-width="80px">
            <el-form-item label="开始日期:">
              <el-date-picker
                v-model="formLine.startDate"
                type="datetime"
                placeholder="选择开始日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6"
          ><el-form label-width="80px"
            ><el-form-item label="结束日期:"
              ><el-date-picker
                v-model="formLine.endDate"
                type="datetime"
                placeholder="选择结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker></el-form-item></el-form
        ></el-col>
        <el-col :span="6"
          ><el-form label-width="80px"
            ><el-form-item label="时间间隔:"
              ><el-select v-model="formLine.timeInterval" placeholder="请选择">
                <el-option
                  v-for="item in formLine.timeIntervalList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option> </el-select></el-form-item></el-form
        ></el-col>
        <el-col :span="2"
          ><el-button size="mini" type="primary" @click="getWeightLine"
            >查 询</el-button
          ></el-col
        >
      </el-row>

      <!-- 统计列表 -->
      <div style="width: 100%; height: 500px" id="weightLinediv"></div>
    </el-dialog>
  </div>
</template>

<script>
import eventBus from '@/eventBus.js'
import * as echarts from 'echarts';
import '../../assets/css/common.css'
import export2Excel from '@/utils/exportExcel/index.js'
import { formatDate } from '@/common/js/date.js'

// 转换地图坐标
// import { getLatLng } from '@/assets/js/pointtransfertools.js'

// import { BMap } from 'vue-baidu-map'
// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

export default {
  data () {
    return {
      dialogVisibleCCTVTitle: "",
      dialogVisibleCCTV: false,
      account: '',
      // 筛选条件
      form: {
        name: '',
        groupingValue: '',
        statusValue: '全部',
        pointTypeValue: '全部'
      },
      formLine: {
        // startDate: '',
        // endDate: '',
        startDate: formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd hh:mm:ss'),
        endDate: formatDate(new Date(new Date()), 'yyyy-MM-dd hh:mm:ss'),
        VID: '',
        timeInterval: '10',
        timeIntervalList: [{ label: '10分钟', value: '10' }, { label: '30分钟', value: '30' }, { label: '1小时', value: '60' }],

      },
      // 垃圾桶点位数据
      boxData: [],
      // 原始数据
      originalData: [],
      // 类型列表
      typeOptions: ['全部', '巡查员', '指导员'],
      // 状态列表
      statusOptions: [
        { value: '全部', label: '全部' },
        { value: '0', label: '在线' },
        { value: '6', label: '离线' }
      ],
      tableData: [],
      statusNums: {
        onlines: 0,
        outlines: 0
      },
      // person_data: [],
      switch_value: true,
      time_value: '',
      time_Interval: [{
        value: 10000,
        label: '10秒'
      }, {
        value: 30000,
        label: '30秒'
      }, {
        value: 60000,
        label: '1分钟'
      }],
      groupingList: [],
      selectPointType: [{
        value: '全部',
        label: '全部'
      }, {
        value: '大中型餐饮单位',
        label: '大中型餐饮单位'
      }, {
        value: '沿街小型商铺',
        label: '沿街小型商铺'
      }, {
        value: '小区',
        label: '小区'
      }],
      wakeValue: '',
      // 筛选数据
      screeningData: [],
      // 是否显示实时在线统计对话框
      Visible: false,
      statisticalData: [],
      MouseEvent: {
        top: 0,
        left: 0,
        isShow: false
      },
      // teamNumber: '',
      // 右键表格
      row: null,
      clickRowData: null,
      disabled1: false,
      disabled2: true,
      trackingValue: false,
      localtion: {},
      radio: '定位时间',

      weightLinedialogVisible: false,
      weightLinedialogTitle: '',
      weightLinedialogID: '',
      weightLinedialogEchart: null
    }
  },
  mounted () {
    this.getInfoList()
    this.selectChange()
    // this.getBoxList('')
    this.getPlacePointApi()
    this.getCLCPolygon()
    this.getGroupingList()
    // this.alertAlarm()//报警提示
    eventBus.$on('closeCover', val => this.Visible = val)
    eventBus.$on('urlParams', val => this.account = val)
  },
  methods: {
    dropdown () {
      var fold_btns = document.querySelector('.fold_btns')
      var fold_btn = document.querySelector('.fold_btn')
      var fold_brn = document.querySelector('.fold_brn')
      fold_btn.style.display = 'none';
      fold_brn.style.display = 'inline-block';
      fold_btns.style.display = 'block';
    },
    updown () {
      var fold_btns = document.querySelector('.fold_btns')
      var fold_btn = document.querySelector('.fold_btn')
      var fold_brn = document.querySelector('.fold_brn')
      fold_btn.style.display = 'inline-block';
      fold_brn.style.display = 'none';
      fold_btns.style.display = 'none';
    },
    // 获取人员信息列表
    async getInfoList () {
      // DataListCompany/GetKitchenCarListBHApi?ClientNo=00000
      var url = `/DataListCompany/GetKitchenCarListBHApi?ClientNo=` + localStorage.getItem('CLIENT_NO') // zxdata
      let { data } = await this.$Http.get(url)
      if (this.radio === '定位时间') {
        this.originalData = data.sort((a, b) => {
          // console.log(a, b)
          let aTimeString = a.ORIENTATION_TIME
          let bTimeString = b.ORIENTATION_TIME
          aTimeString = aTimeString.replace(/-/g, '/')
          bTimeString = bTimeString.replace(/-/g, '/')
          const aTime = new Date(aTimeString).getTime()
          const bTime = new Date(bTimeString).getTime()
          return bTime - aTime
          // console.log(aTime, bTime)
        })
        // console.log(this.originalData)
      } else if (this.radio === '称重时间') {
        this.originalData = data.sort((a, b) => {
          // console.log(a, b)
          let aTimeString = a.WEIGHING_TIME
          let bTimeString = b.WEIGHING_TIME
          aTimeString = aTimeString.replace(/-/g, '/')
          bTimeString = bTimeString.replace(/-/g, '/')
          const aTime = new Date(aTimeString).getTime()
          const bTime = new Date(bTimeString).getTime()
          return bTime - aTime
          // console.log(aTime, bTime)
        })
        // console.log(this.originalData)
      }
      // var url = `/InspectionGuidance/GetCleanerAllListApi?StreetNo=${this.$route.query.StreetNo}` // zxdata
      // // var url = '/BasicData/GetWorkerListApi'
      // let { data } = await this.$Http.get(url)
      // // 原始数据
      // this.originalData = data   

      this.statusNums.outlines = 0
      this.statusNums.onlines = 0
      data.forEach(item => {
        if (item.states === '6') {
          this.statusNums.outlines++
        }
        if (item.states === '0') {
          this.statusNums.onlines++
        }
        if (item.LICENSE_PLATE === '津C95726') {
          // Vue.set(item,'withVideoAble',"监控视频")
          item.withVideoAble = "支持视频监控"
        } else {
          // Vue.set(item,'withVideoAble',"无视频")
          item.withVideoAble = ""
        }
      })
      console.log('a' + this.statusNums.outlines + 'b' + this.statusNums.onlines)
      data = data.filter(item => {
        item.ORIENTATION_TIME = item.ORIENTATION_TIME.split('.')[0].replace('T', ' ')
        // item.BIRTHDAY = item.BIRTHDAY.split('T')[0].replace('-', ' 年 ').replace('-', ' 月 ') + ' 日 '
        // item.WORKDATE = item.WORKDATE.split('T')[0].replace('-', ' 年 ').replace('-', ' 月 ') + ' 日 '
        const timeDifference = ((new Date() - new Date(item.ORIENTATION_TIME)) / 1000) / 60
        if (timeDifference <= 3) return item
      })
      this.tableData = data
      eventBus.$emit('mapData1', this.statusNums)
      eventBus.$emit('mapData2', this.originalData)
      this.screenData()
    },
    // 获得分组列表
    async getGroupingList () {
      var url = `/DataListCompany/GetGroupingModelsBHApi?ClientNo=` + localStorage.getItem('CLIENT_NO') // zxdata
      let { data } = await this.$Http.get(url)
      this.groupingList = data
      eventBus.$emit('warningGroup', this.groupingList)
    },
    // 格式化单元格内容
    formatter (row, column, cellValue, index) {
      if (cellValue === '0') return '在线'
      if (cellValue === '6') return '离线'
    },
    // 查询人员列表
    query () {
      this.screenData()
    },
    // 自动查询
    switchChange () {
      this.selectChange()
    },
    selectChange (time = 16000) {
      let timeId = null
      if (this.switch_value) {
        timeId = setInterval(() => {
          this.getInfoList()
          if (!this.switch_value) clearInterval(timeId)
        }, time)
      }
    },
    // 筛选数据
    screenData () {
      let { name, groupingValue, statusValue, pointTypeValue } = this.form
      // if (statusValue === '在线') statusValue = '0'
      // if (statusValue === '离线') statusValue = '6'
      if (name) {
        this.screeningData = this.originalData.filter(item => item.LICENSE_PLATE.includes(name))
      } else {
        this.screeningData = this.originalData
      }
      this.screeningData = this.screeningData.filter(item => item.CLIENT_NO.includes(groupingValue))
      if (pointTypeValue !== '全部') this.screeningData = this.screeningData.filter(item => item.POINTTYPE === pointTypeValue)

      // this.statusNums.onlines = 0
      // this.screeningData.forEach(item => {
      //   if (item.states === 1) this.statusNums.onlines++

      // })
      // eventBus.$emit('mapData2', this.screeningData)
    },
    // 实时在线统计
    async onlineStatistics () {
      this.Visible = true
      // var url = `/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=${this.$route.query.StreetNo}`
      // http://111.160.78.62:9942/GarbagePointsApi/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=2
      var url = '/DataListCompany/GetRealTimeOnlineApi?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.statisticalData = data
      eventBus.$emit('isCover', this.Visible)
    },
    // 关闭实时在线统计
    close () {
      this.Visible = false
      eventBus.$emit('isCover', this.Visible)
    },
    // 右键表格某一行
    rowHandle (row, column, event) {
      window.event.returnValue = false
      this.row = row
      this.MouseEvent.left = event.clientX
      this.MouseEvent.top = event.clientY - 26 * 2

      this.MouseEvent.isShow = true
      // this.teamNumber = row.CLIENT_NO
    },
    // // 显示班组区域
    // groupArea (CLIENT_NO) {
    //   eventBus.$emit('showGroupArea', CLIENT_NO)
    //   this.MouseEvent.isShow = false
    // },
    // // 显示清扫队区域
    // clearArea (CLIENT_NO) {
    //   eventBus.$emit('showClearArea', CLIENT_NO)
    //   this.MouseEvent.isShow = false
    // },
    // // 清除区域
    // cleanArea () {
    //   eventBus.$emit('clearArea')
    //   this.MouseEvent.isShow = false
    // },
    // 导出Excel
    exportExcel () {
      let excelName = ''
      if (!document.querySelector('.group li.selected span')) {
        excelName = '车辆实时信息列表'
      } else {
        excelName = document.querySelector('.group li.selected span').innerText + '-信息'
      }
      // const excelName = document.querySelector('.group li.selected span').innerText + '-人员信息'
      const tHeader = ['编号', '车辆名称', '分组', '称重时间', '吨数', '垃圾类型', '来源类型', '工作点位', '处理场名称', '车辆类型', '最终定位时间', '位置', '航向', '航速', '经度', '纬度']
      const filterVal = ['VID', 'LICENSE_PLATE', 'CLIENT_NAME', 'WEIGHING_TIME', 'TONNANG', 'RUBBISHTYPE', 'POINTTYPE', 'WORKINGPOINT', 'FACTORY', 'CAR_TYPE', 'ORIENTATION_TIME', 'POSITION', 'Direction', 'SPEED', 'LONGITUDE', 'LATITUDE']
      export2Excel(tHeader, filterVal, this.screeningData, excelName)
    },
    // 点击表格某一行
    clickRow (row) {
      this.MouseEvent.isShow = false
      this.clickRowData = row
    },
    // 双击表格某一行
    dblClickRow (row) {
      eventBus.$emit('mapLocaltion', row)
    },
    // 双击表格某一行
    dblClickRowMonitor (row) {
      eventBus.$emit('warningItem', row)
    },
    // 右键导出Excel
    exportRowExcel () {
      this.MouseEvent.isShow = false
      const excelName = this.row.CLIENT_NAME + '-' + this.row.LICENSE_PLATE + '-信息'
      const tHeader = ['编号', '车辆名称', '分组', '称重时间', '吨数', '垃圾类型', '来源类型', '工作点位', '处理场名称', '车辆类型', '最终定位时间', '位置', '航向', '航速', '经度', '纬度']
      const filterVal = ['VID', 'LICENSE_PLATE', 'CLIENT_NAME', 'WEIGHING_TIME', 'TONNANG', 'RUBBISHTYPE', 'POINTTYPE', 'WORKINGPOINT', 'FACTORY', 'CAR_TYPE', 'ORIENTATION_TIME', 'POSITION', 'Direction', 'SPEED', 'LONGITUDE', 'LATITUDE']
      let ary = []
      ary.push(this.row)
      export2Excel(tHeader, filterVal, ary, excelName)
    },
    // // 开始跟踪
    // startTracking () {
    //   if (!this.clickRowData) {
    //     this.$message({
    //       message: '请先选择一位人员！',
    //       type: 'warning'
    //     })
    //     return false
    //   }
    //   this.clickRowData.isShow = true
    //   this.disabled1 = true
    //   this.disabled2 = false
    //   eventBus.$emit('Tracking', this.clickRowData)
    //   let timeId = null
    //   timeId = setInterval(() => {
    //     this.screenData()
    //     eventBus.$emit('Tracking', this.clickRowData)
    //     // console.log(11)
    //     if (this.trackingValue) clearInterval(timeId)
    //   }, 6000)
    // },
    // // 取消跟踪
    // cancelTracking () {
    //   this.trackingValue = true
    //   this.disabled1 = false
    //   this.disabled2 = true
    // },
    // 鼠标进入单元格显示其内容
    cellMouseEnter (row, column, cell, event) {
      cell.setAttribute('title', cell.innerText)
    },
    // 轨迹回放
    trajectory () {
      this.MouseEvent.isShow = false
      // 进入轨迹回放页面
      this.$router.push({ path: '/playback', query: { VID: this.row.VID,LICENSE_PLATE: this.row.LICENSE_PLATE } })
    },
    showWeightLine () {
      if (this.echartLine) {
        this.echartLine.clear()
      }
      this.weightLinedialogTitle = '油耗曲线 - ' + this.row.LICENSE_PLATE;
      this.weightLinedialogID = this.row.VID;
      this.weightLinedialogVisible = true;
      this.getWeightLine();
    },
    async getWeightLine () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      var urlStr = 'http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose01?sqlName=&url=exec [S_GetRubbishWeightHoleOnline] "' + this.formLine.startDate + '","' + this.formLine.endDate + '",' + this.row.VID + ',' + this.formLine.timeInterval
      console.log(urlStr)
      let { data } = await this.$Http.get(urlStr)
      loading.close();
      // 绘制图表
      this.weightLinedialogEchart = echarts.init(document.getElementById('weightLinediv'));
      this.weightLinedialogEchart.setOption(
        {
          xAxis: {
            type: 'category',
            data: data.categories
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            type: 'line',
            smooth: true,
            data: data.data
          }]
        });
    },
    showCCTV () {
      this.dialogVisibleCCTV = true
      this.dialogVisibleCCTVTitle = this.row.LICENSE_PLATE
      var url = 'http://111.160.78.62:88/808gps/open/player/video.html?lang=zh&vehiIdno=' + this.row.LICENSE_PLATE + '&account=bhclc&password=bhclc'
      document.getElementById('dialogVisibleCCTViframe').src = url
      // window.open(url)
      this.MouseEvent.isShow = false
      // this.MouseEvent.isShow = false
      // // 进入轨迹回放页面
      // this.$router.push({ path: '/playback', query: { VID: this.row.VID } })
    },
    // 获取处理厂
    async getPlacePointApi () {
      var url = `/DataListCompany/GetPlacePointApi`;
      let { data } = await this.$Http.get(url)
      eventBus.$emit('mapPlacePoint', data)
    },
    async getCLCPolygon () {
      var url = `/DataListCompany/GetFactoryInfoApi?Type=1`;
      let { data } = await this.$Http.get(url)
      eventBus.$emit('mapCLCPolygon', data)
    },
    async getCLCMarker () {
      var url = `/DataListCompany/GetFactoryInfoApi?Type=0`;
      let { data } = await this.$Http.get(url)
      eventBus.$emit('mapCLCMarker', data)
    }
  }
}
</script>

<style scoped lang="less">
.monitoring {
  .el-form-item__content {
    max-width: 100px;
  }
  height: 100%;
  // position: relative;
  .el-form {
    width: 100%;
    height: 40px;
    line-height: 40px;
    // display: flex;
    // align-items: center;
    overflow: hidden;
    // border-bottom: 2px solid #007ACC;
    .el-form-item {
      // float: left;
      display: inline-block;
      margin: 0;
      // flex-shrink: 0;
      .el-input {
        height: 22px;
      }
    }
    .el-button {
      padding: 0 5px;
      height: 28px;
      border-radius: 2px;
      display: inline-block;
      /deep/span {
        font-size: 14px;
        // margin-left: 4px;
        line-height: 22px;
      }
    }
    .people_number {
      height: 40px;
      line-height: 40px;
      padding: 0 5px;
      color: #333;
      // float: left;
      display: inline-block;
      // flex-shrink: 0;
      span {
        display: inline-block;
        padding: 0 2px;
        height: 30px;
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;
        text-align: center;
      }
    }
    .switch {
      display: inline-block;
      min-width: 100px;
      // height: 40px;
      // line-height: 40px;
      margin-left: 10px;
      // float: left;
      // flex-shrink: 0;
      span {
        margin-right: 2px;
        cursor: default;
        color: #606266;
      }
      .el-select {
        max-width: 100px;
        height: 22px;
        margin-left: 5px;
        /deep/.el-input__suffix {
          top: 8px;
          line-height: 24px;
        }
      }
    }
    .el-button {
      flex-shrink: 0;
    }
  }
  @media screen and (min-width: 1600px) {
    .fold_btn {
      opacity: 0;
    }
  }
  @media screen and (max-width: 1660px) {
    .el-form {
      width: 100%;
    }
    .fold_btn {
      display: inline-block;
    }
  }
  // @media screen and (min-width: 1455px) {

  // }
  @media screen and (max-width: 1455px) {
    .iconone {
      display: none !important;
    }
  }
  .fold_btn {
    position: relative;
  }
  .fold_btns {
    position: absolute;
    top: 65px;
    right: 0;
    width: auto;
    height: auto;
    overflow-y: scroll;
    background: #fff;
    z-index: 1111111;
    display: none;
  }
  .buttons {
    z-index: 55555;
    width: 80px;
    height: 120px;
    background: #eee;
  }
  .table_list {
    position: absolute;
    top: 70px;
    bottom: 0px;
    overflow-y: auto;
    width: 100%;
    .el-table {
      height: 100%;
    }
    /deep/.el-table__body-wrapper {
      height: calc(~'100% - 34px');
      overflow-y: auto;
    }
  }
}
// .icon-kaishi .icon-kaishi:hover{
//   background: #60a53e!important;
//   color: #eee;
// }
// .icon-tingzhi .icon-tingzhi:hover{
//   background: #cc8c8c!important;
//   color: #eee;
// }
.row_box {
  width: 120px;
  // height: 130px;
  color: #666;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  position: fixed;
  span {
    display: block;
    text-align: center;
    line-height: 26px;
    cursor: default;
    &:hover {
      color: #fff;
      background-color: #409eff;
    }
  }
}
// .row_box {
//   width: 120px;
//   // height: 130px;
//   color: #666;
//   background-color: #f3f3f3;
//   border: 1px solid #ccc;
//   position: fixed;
//   span {
//     display: block;
//     text-align: center;
//     line-height: 26px;
//     cursor: default;
//     &:hover {
//       color: #fff;
//       background-color: #007ACC;
//     }
//   }
// }
.statistical {
  width: 600px;
  min-height: 390px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  .title {
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ccc;
    padding-left: 5px;
    box-sizing: border-box;
    h3 {
      color: #666;
    }
    span {
      margin-left: 450px;
    }
  }
  .statistical_content {
    max-height: 350px;
    min-height: 310px;
    padding: 0 20px;
    background-color: #f3f3f3;
    overflow-y: auto;
  }
  .statistical_time {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    color: #666;
    background-color: #f3f3f3;
    border-top: 1px solid #ccc;
    box-sizing: border-box;
  }
}
</style>
